{include file="common/head"/}

<!-- start main -->
<div class="main_bg">
    <div class="wrap">
        <div class="main">
            <!-- start popup -->
            <div id="small-dialog" class="mfp-hide">
                <div class="pop_up">
                    <h2></h2>
                    <img src="__STATIC__/home/images/zoom.jpg" title="image-name">
                    <p></p>
                    <a class="btn" href="/home/details.html">Read more</a>
                </div>
            </div>
            <!-- end popup -->
            <!-- start gallery  -->
            <div class="container">
                <ul id="filters" class="clearfix">
                    <li><span class="filter" data-filter="{$categoryAll}">All</span></li>
                    {volist name="category" id="cat"}
                    <li><span class="filter" data-filter="{$cat}">{$cat}</span></li>
                    {/volist}
                </ul>
                <div id="portfoliolist">
                    {volist name="articleList" id="article"}
                    <a class="popup-with-zoom-anim" data-mfp-src="#small-dialog">
                        <div class="portfolio {$article.catname ? $article.catname : '-'}" data-cat="{$article.catname}" data-id="{$article.id}" data-desc="{$article.description}" data-title="{$article.title}">
                            <div class="portfolio-wrapper">				
                                    <img src="__STATIC__/{$article.thumb}" height="156px"/>
                                <div class="label">
                                    <div class="label-text">
                                        <p class="text-title">{$article.title}</p>
                                        <span class="text-category">{$article.catname ? $article.catname : '-'}</span>
                                    </div>
                                    <div class="label-bg"></div>
                                </div>
                            </div>
                        </div>		
                    </a>
                    {/volist}
                </div>
            </div><!-- end container -->
        </div>
    </div>
</div>


<script type="text/javascript">
    $(function () {
        
        var filterList = {
        
            init: function () {
            
                // MixItUp plugin
                // http://mixitup.io
                $('#portfoliolist').mixitup({
                    targetSelector: '.portfolio',
                    filterSelector: '.filter',
                    effects: ['fade'],
                    easing: 'snap',
                    // call the hover effect
                    onMixEnd: filterList.hoverEffect()
                });				
            
            },
            
            hoverEffect: function () {
            
                // Simple parallax effect
                $('#portfoliolist .portfolio').hover(
                    function () {
                        $(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
                        $(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');				
                    },
                    function () {
                        $(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
                        $(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');								
                    }		
                );				
            
            }

        };
        
        // Run the show!
        filterList.init();
            
    });	
</script>
<script>
$(document).ready(function() {
    var magnificPopup = $.magnificPopup.instance;

    var popup = $('.popup-with-zoom-anim');
    var portfolio = $('.popup-with-zoom-anim > .portfolio');
    var dialog = $('#small-dialog');
    var dialog_h2 = $('#small-dialog  h2');
    var dialog_desc = $('#small-dialog  p');
    var dialog_href = $('#small-dialog  a');
    var dialog_image = dialog.find('img');

    portfolio.click(function(){
        var id = $(this).attr("data-id");
        var image_url = $(this).find('img').attr('src');
        var title = $(this).attr("data-title");
        var desc  = $(this).attr("data-desc");
        if (!id) 
            return; 
        
        dialog_h2.html(title); 
        dialog_desc.html(desc);
        dialog_image.attr('src', image_url);
        dialog_href.attr('href', dialog_href.attr('href')+'?id='+id);
        magnificPopup.open({
            items: {
                src: dialog
            },
            type: 'inline'
        });
        // $.ajax({
        //     type:'GET',
        //     url:'/home/details/index?id='+id,
        //     success:function(response){
        //         if (response.code != 0)
        //             return;
        //         dialog_h2.html(response.data.title); 
        //         dialog_desc.html(response.data.description);
        //         dialog_image.attr('src') = image_url;
        //         magnificPopup.open({
        //             items: {
        //                 src: dialog
        //             },
        //             type: 'inline'
        //         });
        //     }
        // });
    });
  
    // $('.popup-with-zoom-anim').magnificPopup({
    //     type: 'inline',
    //     fixedContentPos: false,
    //     fixedBgPos: true,
    //     overflowY: 'auto',
    //     closeBtnInside: true,
    //     preloader: false,
    //     midClick: true,
    //     removalDelay: 300,
    //     mainClass: 'my-mfp-zoom-in'
    // });

});
</script>